<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cleanity</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="js/jquery.wysiwyg.css" rel="stylesheet" type="text/css" />
<link type="text/css" media="screen" rel="stylesheet" href="js/colorbox.css" />
<link type="text/css" media="screen" rel="stylesheet" href="js/colorbox-custom.css" />

<style type="text/css">
div.wysiwyg ul.panel li {padding:0px !important;} /**textarea visual editor padding override**/
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
<!--[if IE]>
			<link type="text/css" media="screen" rel="stylesheet" href="js/colorbox-custom-ie.css" title="Cleanity" />
<![endif]-->

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/jquery.corners.min.js"></script>
<script type="text/javascript" src="js/bg.pos.js"></script>
<script type="text/javascript" src="js/jquery.wysiwyg.js"></script>

<script src="js/tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="js/cleanity.js"></script>

</head>

<body>
<div id="container">
    <div class="hidden">
    <div id="sample-modal"><h2 style="font-size:160%; font-weight:bold; margin:10px 0;">Modal Box Content</h2><p>Place your desired modal box content here</p></div>
    </div><!-- end of hidden -->
    <div id="header">
      <div id="top">
      <h1><a href="#">Cleanity</a></h1>
      <p id="userbox">Hello <strong>John Doe</strong> &nbsp;| &nbsp;<a href="#">Settings</a> &nbsp;| &nbsp;<a href="#">Logout</a> <br />
      <small>Last Login: 12 May 2009</small></p>
      <span class="clearFix">&nbsp;</span>
      </div>
      <ul id="menu">
        <li class="selected"><a href="#">Dashboard</a></li>
        <li><a class="top-level" href="#">Users <span>&nbsp;</span></a>
          <ul>
            <li><a href="#">Add User</a></li>
            <li><a href="#">Edit Users</a></li>
          </ul>
        </li>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Modules</a></li>
        <li><a class="top-level" href="#">Settings <span>&nbsp;</span></a>
            <ul>
            <li><a href="#">Site Settings</a></li>
            <li><a href="#">File Paths</a></li>
            <li><a href="#">User Profiles</a></li>
          </ul></li>
      </ul>
	 <form action="" method="get" name="form1" id="form1">
      <fieldset>
      <legend>Search</legend>
        <label id="searchbox">
        <input type="text" name="s" id="s" />
        </label>
        <input class="hidden" type="submit" name="Submit" value="Search" />
      </fieldset>
      </form>
      <span class="clearFix">&nbsp;</span>
    </div><!-- end of #header -->

<div id="content">
	<div id="content-top">
    <h2>Dashboard</h2>
      <a href="#" id="topLink">Change Order</a> 
      <span class="clearFix">&nbsp;</span>
      </div><!-- end of div#content-top -->
      <div id="left-col">
          <div class="box">
              <h4 class="yellow">Side Menu</h4>
          <div class="box-container"><!-- use no-padding wherever you need element padding gone -->
              <ul class="list-links">
                  <li><a href="#">Manage Filters</a></li>
                  <li><a href="#">Setup a New Site</a>
                  		<ul>
                        <li><a href="#">Configure Paths</a></li>
                        <li><a href="#">Define Database Name</a></li>
                        </ul>
                  </li>
                  <li><a href="#">Manage Site Accounts</a></li>
              </ul>
          </div><!--end of div.box-container -->
          </div><!-- end of div.box --><!--end of div.box --><!-- end of div.box -->
      </div> <!-- end of div#left-col -->
      
      <div id="mid-col" class="full-col"><!-- end of div.box -->
      	
   	  <div class="box">
      		<h4 class="white">Tables (Long Version)</h4>
        <div class="box-container">     		
      		<table class="table-long">
      			<thead>
      				<tr>
      					<td>Col1</td>
      					<td>Col2</td>
      					<td>Col3</td>
      					<td>Col4</td>
      				</tr>
      			</thead>
      			<tfoot>
      				<tr>
      					<td class="col-chk"><input type="checkbox" /></td>
      					<td colspan="4"><div class="align-right"><select class="form-select"><option value="option1">Bulk Options</option>
      					<option value="option2">Delete All</option></select>
      					<a href="#" class="button"><span>perform action</span></a></div></td>
      				</tr>
      			</tfoot>
      			<tbody>
      				<tr class="odd">
      					<td class="col-chk"><input type="checkbox" /></td>
      					<td class="col-first">John Doe</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a href="#" class="table-edit-link">Edit</a> <span class="hidden"> | </span> <a href="#" class="table-delete-link">Delete</a></td>
      				</tr>
      				<tr>
      					<td class="col-chk"><input type="checkbox" /></td>
      					<td class="col-first">Jane Doe</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a href="#" class="table-edit-link">Edit</a> <span class="hidden"> | </span> <a href="#" class="table-delete-link">Delete</a></td>
      				</tr>
      				<tr class="odd">
      					<td class="col-chk"><input type="checkbox" /></td>
      					<td class="col-first">George Livingston</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a href="#" class="table-edit-link">Edit</a> <span class="hidden"> | </span> <a href="#" class="table-delete-link">Delete</a></td>
      				</tr>
      				<tr>
      					<td class="col-chk"><input type="checkbox" /></td>
      					<td class="col-first">Lorem Ipsum Sit Amet</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a href="#" class="table-edit-link">Edit</a> <span class="hidden"> | </span> <a href="#" class="table-delete-link">Delete</a></td>
      				</tr>
      				<tr class="odd">
      					<td class="col-chk"><input type="checkbox" /></td>
      					<td class="col-first">John Doe</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a href="#" class="table-edit-link">Edit</a> <span class="hidden"> | </span> <a href="#" class="table-delete-link">Delete</a></td>
      				</tr>
      			</tbody>
      		</table>  	
      	</div><!-- end of div.box-container -->
      	</div> <!-- end of div.box -->
      
      </div><!-- end of div#mid-col --><!-- end of div#right-col -->     
      
      <span class="clearFix">&nbsp;</span>     
</div><!-- end of div#content -->
<div class="push"></div>
</div><!-- end of #container -->

<div id="footer-wrap">
	<div id="footer">
        <div id="footer-top">
        	<div class="align-left">
            <h4>Dashboard</h4>
            <p><a href="#">Dasboard Sub 1</a> | <a href="#">Dasboard Sub 2</a> | <a href="#">Dasboard Sub 3</a></p>
        	</div>
            <div class="align-right">
            <h2><a href="#">Cleanity</a></h2>
            </div>
            <span class="clearFix"></span>
        </div><!-- end of div#footer-top -->
        
        <div id="footer-bottom">
        	<p>&copy; 2009 Cleanity. Theme by Onur Oztaskiran of <a href="http://www.monofactor.com">Monofactor</a>, 
            via <a href="http://themeforest.net">Themeforest</a></p>
        </div>
        
	</div>
</div>


</body>
</html>
